<template>
  <n-h6>私信</n-h6>
  <n-flex vertical :size="1">
    <PrivateMessageButton
      @click="selectPrivateMessage(item)"
      :closeCallback="closeCallback"
      v-for="item of privateMessageList"
      :key="item.data.targetUser.userId"
      :item="item">
      <template #avatar>
        <Avatar
          :size="32"
          :src="item.data.targetUser.avatar"
          :state="item.data.targetUser.status" />
      </template>
      <template #default>
        <slot name="default">{{ item.data.targetUser.nickname }}</slot>
      </template>
    </PrivateMessageButton>
  </n-flex>
</template>

<script setup lang="ts">
import PrivateMessageButton from "@/components/private-letter/private-letter-left/PrivateMessageButton.vue";
import Avatar from "@/components/other/Avatar.vue";
import router from "@/router";
import {
  PrivateMessageItem,
  usePrivateMessageStore,
} from "@/store/modules/usePrivateMessageStore.ts";
import { storeToRefs } from "pinia";

const privateMessageStore = usePrivateMessageStore();

privateMessageStore.refresh();
const { privateMessageList } = storeToRefs(privateMessageStore);

function selectPrivateMessage(item: PrivateMessageItem) {
  // 跳转到页面
  router.push({
    name: "privateLetterOne",
    params: { privateId: item.data.privateId },
  });
}

function closeCallback(item: PrivateMessageItem) {
  //   关闭私信
  alert(item.data.privateId);
}
</script>

<style scoped></style>
